import "./daily.scss"
import { getDaily } from "../../action/action";
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { setCookie } from "../../js/cookie";
import { PullToRefresh } from 'antd-mobile';
class DailyUI extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            down: true,
            height: document.documentElement.clientHeight,
            data: [],
        }
    }
    componentDidMount() {
        this.props.init()
    }
    render() {
        let { dailyData } = this.props;
        let textCard = null;
        let followCard = [];
        let count = 0;
        if (dailyData) {
            let domList = dailyData.itemList.map((item, index) => {
                if (item.type == "textCard") {
                    count = index;
                    textCard = (
                        <div className="title" key={index}>
                            <h3>{item.data.text}</h3>
                        </div>
                    )
                    followCard = [];
                }
                if (item.type == "followCard") {
                    followCard.push(
                        <li key={index}>
                            <div className="imgBox">
                                <Link to={"/video/" + item.data.content.data.id}><img src={item.data.content.data.cover.detail} /></Link>
                                <span>{item.data.content.data.duration / 60 < 10 ? "0" + parseInt(item.data.content.data.duration / 60) : parseInt(item.data.content.data.duration / 60)}:{item.data.content.data.duration % 60 < 10 ? "0" + item.data.content.data.duration % 60 : item.data.content.data.duration % 60}</span>
                            </div>
                            <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.content.data.author.id); }}>
                                <div className="info">
                                    <div className="via">
                                        <img src={item.data.content.data.author.icon} />
                                    </div>
                                    <div className="msg">
                                        <h2>{item.data.content.data.title}</h2>
                                        <p>{item.data.content.data.author.name} / #{item.data.content.data.category}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    )
                }
                if (index == count + 5) {
                    return (
                        <div key={index}>
                            {textCard}
                            <ul>
                                {followCard}
                            </ul>
                        </div>
                    )
                }
            })
            return (
                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                    direction={this.state.down ? 'down' : 'up'}
                    refreshing={this.state.refreshing}
                    onRefresh={() => {
                        this.setState({ refreshing: true });
                        setTimeout(() => {
                            location.reload()
                            this.setState({ refreshing: false });
                        }, 1000);
                    }}
                >
                    <div className="daily">
                        {domList}
                    </div>
                </PullToRefresh>
            )
        } else {
            return (<div></div>)
        }
    }
}

let mstp = ({ daily }) => daily;
let msdp = dispatch => {
    return {
        init() {
            dispatch(getDaily())
        }
    }
}
export let Daily = connect(mstp, msdp)(DailyUI)